<template>
  <div class="audit">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model">
        <a-form-model-item
          label="节点 Key"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="请输入节点Key" v-model="model.text" />
        </a-form-model-item>
        <a-form-model-item
          label="节点名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="请输入节点名称" v-model="model.text" />
        </a-form-model-item>
        <a-form-model-item
          label="属性"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-select v-model="model.region" placeholder="请选择用户类型">
            <a-select-option value="one">审批 </a-select-option>
            <a-select-option value="two">协同 </a-select-option>
            <a-select-option value="three">知会 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="用户类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-select v-model="model.region" placeholder="请选择用户类型">
            <a-select-option value="one">指定人 </a-select-option>
            <a-select-option value="two">候选用户 </a-select-option>
            <a-select-option value="three">候选角色 </a-select-option>
            <a-select-option value="four">候选部门 </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item
          label="处理人"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="添加" v-model="model.text" />
        </a-form-model-item>

        <a-form-model-item
          label="描述"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-textarea placeholder="请输入描述" v-model="model.text" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm
        title="确定放弃编辑？"
        @confirm="handleCancel"
        okText="确定"
        cancelText="取消"
      >
        <a-button style="margin-right: 4px">取消</a-button>
      </a-popconfirm>
      <a-button
        @click="handleSubmit"
        type="primary"
        class="confirm"
        :loading="confirmLoading"
        >提交</a-button
      >
    </div>
  </div>
</template>

<script>
import { queryall } from "@/api/api";
export default {
  props: {
    nodeData: Object,
    lf: Object || String,
  },
  data() {
    return {
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
      roleDisabled: false,
      disableSubmit: false,
      rolesOptions: [],
    };
  },
  created() {
    this.initRoleList();
  },
  mounted() {
    const { properties, text } = this.$props.nodeData;
    //   console.log(this.$props.nodeData);
    if (properties) {
      //   console.log(this.$data.model, properties);
      this.$data.model = Object.assign({}, this.$data.model, properties);
      //   console.log(this.$data.model);
    }
    if (text && text.value) {
      this.$data.model.text = text.value;
    }
    if (text && text.value) {
      this.$data.text = text.value;
    }
  },
  methods: {
    //初始化角色字典
    initRoleList() {
      queryall().then((res) => {
        if (res.success) {
          this.rolesOptions = res.result.map((item, index, arr) => {
            let c = { label: item.roleName, value: item.id };
            return c;
          });
          //   console.log("this.rolesOptions: ", this.rolesOptions);
        }
      });
    },
    handleSubmit() {
      //   console.log("submit!");
      // const { id } = this.$props.nodeData
      // this.$props.lf.setProperties(id, this.$data.form);
      const nodeData = this.$props.nodeData;
      //   console.log(nodeData);
      nodeData.properties = this.$data.model;
      this.$props.lf.setProperties(nodeData.id, this.$data.model);
      this.$props.lf.updateText(nodeData.id, this.$data.model.text);
    },
    handleCancel() {},
  },
};
</script>

<style lang="scss">
.audit {
  // .ant-drawer-body{
  //     padding-top: 0 !important;
  // }
  p {
  }
  .ant-form-item-label {
    text-align: left !important;
  }
}
</style>